<template>
  <div class="web-online-config">
    <div class="tip">{{$t('configLazyLoad.webchatGlobalSet.labelTips11')}}</div>
    <scroll-position height="calc(100vh - 110px)" :list="list" :revise="-10">
    <el-form class="main" ref="form" :model="form" :rules="rules" label-position="left"  label-width="120px">
      <affix :id="list[0].id" class="basicSet margin-b-20" :label="$t('configLazyLoad.webchatGlobalSet.quickSessionSet')" ref="mainStep1">
        <!-- <el-form-item label="自动结束会话：">
          <el-switch
            v-model="form.autoCloseSession"
            @change="autoCloseChange"
            active-value="1"
            inactive-value="0"
            active-color="#459ae9"
            inactive-color="#ccc">
          </el-switch>
          <el-tooltip
            transition="fade-leave"
            effect="dark"
            content="当座席在指定时间内未收到访客发送的消息时，系统将自动结束会话。开启自动结束会话后，可设置对话时间和会话结束类型"
            placement="bottom">
            <i class="icon iconfont icon-tixingweizhi"></i>
          </el-tooltip>
        </el-form-item>
        <div v-if="form.autoCloseSession === '1'">
          <el-form-item label="自动结束会话时长:" prop="break_len">
            <el-input  type="age" v-model.trim="form.autoCloseSessionTime" class="width-4 fl" style="margin-right: 10px">
              <template slot="append">分钟</template>
            </el-input>
            <span class="prompt">默认值为10分钟</span>
          </el-form-item>
          <el-form-item label="自动结束会话类别:" prop="break_len">
            <el-select v-model="form.autoCloseSessionType" placeholder="请选择" class="width-4">
              <el-option
                v-for="item in autoCloseOptions"
                :value="item.key"
                :label="item.label">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="自动结束会话提示:">
            <el-input v-model="form.autoCloseSessionMsg" type="textarea" class="width-4"></el-input>
          </el-form-item>
        </div> -->
        <el-form-item :label="$t('configLazyLoad.webchatGlobalSet.closeType')" prop="break_len">
          <el-select v-model="form.fastOff" :placeholder="$t('public.pleasePick')" class="width-4">
            <el-option value="">{{$t('public.pleasePick')}}</el-option>
            <el-option
              v-for="item in autoCloseOptions"
              :value="item.key"
              :label="item.label"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </affix>
      <affix :id="list[1].id" class="basicSet margin-b-20" :label="$t('configLazyLoad.webchatGlobalSet.prohibitedSet')" ref="mainStep2">
        <el-switch
          v-model="form.illegalSwitch"
          active-color="#459ae9"
          inactive-color="#ccc">
        </el-switch>
        <el-form-item :label="$t('configLazyLoad.webchatGlobalSet.labelTips1')" prop="break_len" v-if="form.illegalSwitch">
          <el-input  v-model.trim="form.illegalWords" class="width-4" type="textarea"  :maxlength="3000" :rows="4"></el-input>
          <el-tooltip
            transition="fade-leave"
            effect="dark"
            :content="$t('configLazyLoad.webchatGlobalSet.labelTips2')"
            placement="bottom">
            <i class="icon iconfont icon-tixingweizhi"></i>
          </el-tooltip>
        </el-form-item>
      </affix>
      <affix :id="list[2].id" class="basicSet margin-b-20" :label="$t('configLazyLoad.webchatGlobalSet.visitorsSet')" ref="mainStep2">
        <el-form-item :label="$t('configLazyLoad.webchatGlobalSet.timeSet')" prop="break_len">
          <el-input  type="age" v-model.trim="form.tipsTime" class="width-4" style="vertical-align: middle;">
            <template slot="append">秒</template>
          </el-input>
          <el-tooltip
            transition="fade-leave"
            effect="dark"
            :content="$t('configLazyLoad.webchatGlobalSet.timeSetTips')"
            placement="bottom">
            <i class="icon iconfont icon-tixingweizhi"></i>
          </el-tooltip>
        </el-form-item>
        <el-form-item :label="$t('configLazyLoad.webchatGlobalSet.visitorsTips')">
          <el-input v-model="form.tipsContent" type="textarea" class="width-4"></el-input>
        </el-form-item>
      </affix>
      <affix :id="list[3].id" class="basicSet margin-b-20" :label="$t('configLazyLoad.webchatGlobalSet.otherSet')" ref="mainStep3">
        <el-form-item :label="$t('configLazyLoad.webchatGlobalSet.transferAgent')">
        <el-switch
          v-model="form.forcedTransferSession"
          active-value="1"
          inactive-value="0"
          active-color="#459ae9"
          inactive-color="#ccc">
        </el-switch>
          <el-tooltip
            transition="fade-leave"
            effect="dark"
            :content="$t('configLazyLoad.webchatGlobalSet.transferAgentTips1')"
            placement="right">
            <i class="icon iconfont icon-tixingweizhi"></i>
          </el-tooltip>
      </el-form-item>
        <el-form-item :label="$t('configLazyLoad.webchatGlobalSet.transferSkill')">
          <el-switch
            v-model="form.forcedTransferGroup"
            active-value="1"
            inactive-value="0"
            active-color="#459ae9"
            inactive-color="#ccc">
          </el-switch>
          <el-tooltip
            transition="fade-leave"
            effect="dark"
            :content="$t('configLazyLoad.webchatGlobalSet.quickSessionSet')"
            placement="right">
            <i class="icon iconfont icon-tixingweizhi"></i>
          </el-tooltip>
        </el-form-item>
        <el-form-item class="padding-top" style="text-align: center">
          <el-button type="primary" @click.stop="submitForm" class="primary_btn">{{$t('config.channel.saveSettings')}}</el-button>
        </el-form-item>
      </affix>
    </el-form>
    </scroll-position>
  </div>
</template>
<script>
  import affix from '@/components/ui-modules/affix/Affix.vue'
  import scrollPosition from '../base/scrollPostion'
  import {checkform} from '@/utils/validate'
  import { deepClone } from '@/utils/m7Utils.js'
  export default {
    name: 'webOnlineConfig',
    data () {
      let validateNum = (rule, value, callback) => {
        let message = checkform(value, 'Number3')
        if (message) {
          callback(new Error(this.$t(message)))
        } else {
          callback()
        }
      }
      return {
        autoCloseOptions: [],
        list: [
					{id: 'form0', name: this.$t('configLazyLoad.webchatGlobalSet.quickSessionSet')},
					{id: 'form1', name: this.$t('configLazyLoad.webchatGlobalSet.prohibitedSet')},
					{id: 'form2', name: this.$t('configLazyLoad.webchatGlobalSet.visitorsSet')},
					{id: 'form3', name: this.$t('configLazyLoad.webchatGlobalSet.otherSet')}
				],
        form: {
          fastOff: '', // 快捷关闭会话类别
          autoCloseSessionMsg: '', // 自动结束会话提示文案
          autoCloseSessionType: '', // 自动结束会话类别
          autoCloseSessionTime: '10', // 自动结束会话时长
          illegalSwitch: false, // 敏感词开关
          illegalWords: '', // 敏感词设置
          tipsTime: '0',
          tipsContent: '', // 访客等待时温馨语
          forcedTransferSession: '0', // 强制转接座席，是指忽略被转接座席的当前会话上限，将会话强转接入给座席
          forcedTransferGroup: '0', // 强制转接技能组
          autoType: '',
          autoCloseSession: '0' // 开启自动结束会话
        },
        rules: {
          autoCloseSessionTime: [
            {required: true, message: this.$t('validate.required'), trigger: 'blur'},
            {validator: validateNum, trigger: 'blur'}
          ],
          tipsTime: [
            {required: true, message: this.$t('validate.required'), trigger: 'blur'},
            {validator: validateNum, trigger: 'blur'}
          ]
        }
      }
    },
    components: {
      affix,
      scrollPosition
    },
    computed: {
    },
    methods: {
      submitForm () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            if (this.form.autoCloseSession === '1' && !this.form.autoCloseSessionType) {
              this.$message.error($t('configLazyLoad.webchatGlobalSet.confirmTips1'))
              return
            }
            if (this.form.autoCloseSessionType) {
              this.form.autoCloseSessionName = this.typName(this.form.autoCloseSessionType)
            }
            if (this.form.fastOff) {
              this.form.fastOffName = this.typName(this.form.fastOff)
            }
            let data = deepClone(this.form)
            this.$store.dispatch('saveECommerceGlobalSet', data).then((rep) => {
              if (rep.success) {
                this.$message.success(this.$t('config.channel.configSuccess'))
              } else {
                this.$message.error(this.$t('qualityCheck.saveFali'))
              }
            })
          }
        })
      },
      typName (key) {
        let name = ''
        this.autoCloseOptions.map((item) => {
          if (item.key === key) {
            name = item.valName
          }
        })
        return name
      },
      autoCloseChange (value) {
        if (value === '1') {
          if (this.autoCloseOptions.length === 0) {
            this.$message.error($t('configLazyLoad.webchatGlobalSet.confirmTips2'))
            this.form.autoCloseSession = '0'
          }
        }
      },
      generateCloseSession: function (dics) {
        let Ndics = []
        for (let i = 0; i < dics.length; i++) {
          let obj = dics[i]
          if (obj.type === 'webchat') {
            Ndics = obj.options || []
            break
          }
        }
        if (Ndics.length === 0) {
          return
        }
        let htmpOpt = []
        console.log(Ndics)
        for (let a = 0; a < Ndics.length; a++) {
          let oneName = Ndics[a].name
          let oneOption = Ndics[a].options || []
          if (oneOption.length) {
            let two = Ndics[a].options
            for (let b = 0; b < two.length; b++) {
              let twoName = two[b].name
              let twpOption = two[b].options || []
              if (twpOption.length) {
                let three = two[b].options
                for (let c = 0; c < three.length; c++) {
                  let threeName = three[c].name
                  let threeOption = three[c].options || []
                  if (threeOption.length) {
                    let four = three[c].options
                    for (let d = 0; d < four.length; d++) {
                      let fourName = four[d].name || []
                      let fourOption = three[d].options || []
                      let five = four[d].options || []
                      if (fourOption.length && five.length > 0) {
                        for (let e =0; e < five.length; e++) {
                          let fiveName = five[e].name || []
                          htmpOpt.push({key: five[e].key, valName: fiveName, label: oneName + '—>' + twoName + '—>' + threeName + '->' + fourName + '->' + fiveName})
                        }
                      } else {
                        htmpOpt.push({key: four[d].key, valName: fourName, label: oneName + '—>' + twoName + '—>' + threeName + '->' + fourName})
                      }
                    }
                  } else {
                    htmpOpt.push({key: three[c].key, valName: threeName, label: oneName + '—>' + twoName + '—>' + threeName})
                  }
                }
              } else {
                htmpOpt.push({key: two[b].key, valName: twoName, label: oneName + '—>' + twoName})
              }
            }
          } else {
            htmpOpt.push({key: Ndics[a].key, valName: oneName, label: oneName})
          }
        }
        return htmpOpt
      }
    },
    beforeMount () {
      this.$store.dispatch('getCache', {type: 'channelDic'}).then((res) => {
        this.autoCloseOptions = this.generateCloseSession(res) || []
        this.$store.dispatch('getECommerceGlobalSet', {}).then((resp) => {
          if (resp.row) {
            let _obj = resp.row
            for (let i in this.form) {
              this.form[i] = _obj[i]
            }
            let fastOffFlag = false
            let closeSessionFlag = false
            this.autoCloseOptions.forEach((item) => {
              if (this.form.fastOff && this.form.fastOff === item.key) {
                fastOffFlag = true
              }
              if (this.form.autoCloseSessionType && this.form.autoCloseSessionType === item.key) {
                closeSessionFlag = true
              }
            })
            if (!fastOffFlag) {
              this.form.fastOff = ''
            }
            if (!closeSessionFlag) {
              this.form.autoCloseSessionType = ''
            }
            this.form.autoCloseSession = this.form.autoCloseSession ? this.form.autoCloseSession : '0'
            this.form.autoCloseSessionTime = this.form.autoCloseSessionTime ? this.form.autoCloseSessionTime : '10'
            this.form.forcedTransferGroup = this.form.forcedTransferGroup ? this.form.forcedTransferGroup : '0'
            this.form.forcedTransferSession = this.form.forcedTransferSession ? this.form.forcedTransferSession : '0'
          }
        })
      })
    },
    watch: {
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../assets/common.styl"
  .icon-tixingweizhi
    border: 1px solid $c-main
    border-radius: 50%
    display: inline-block
    height: 16px
    width: 16px
    text-align: center
    line-height: 16px
    font-size: 10px
    color $c-main
    cursor pointer
    margin-left 10px
  .width-4
    width 350px
  .main
    width: calc(100% - 200px);
    margin: 20px;
    padding-top: 1px
  .priority_box
    .priority_title
      margin-bottom 10px
    .priority_item
      height 40px
      .el-checkbox
        vertical-align top
    div,.priority_item_name
      font-size 12px
    .priority_item_name
      margin-right: 10px
      display: inline-block
      overflow: hidden
      text-overflow: ellipsis
      white-space: nowrap
      width: 140px
  .prompt
    color $c-prompt
    line-height 30px
    font-size 12px
    display block
  .title
    color $c-prompt
    height 30px
    line-height 30px
    padding 3px 10px
    border-bottom 1px solid $c-border1
  .tip
    font-size 12px
    padding 10px
    color $c-prompt
    margin-bottom 20px
    background-color #f4f5f9
    border-bottom 1px solid #cccccc
</style>
